<template>
  <div>
    <div style="width: 350px; height: 300px; margin: 20px">
      <VerticalTree :data="treeData" :props="props" show-filter @aaa="aaa" />
    </div>
    <div style="width: 350px; margin: 20px">
      <VTreeSearch
        ref="vtree"
        :value="vtreeVal"
        :data="vtreeData"
        :render="renderTree"
        checkable
        selectable
        :default-expanded-keys="['2']"
        checked-button-text=""
        :show-footer="false"
        :show-check-all="false"
        @checked-change="checkedChange"
        @selected-change="selectedChange"
      />
      <!--      <Vtree-->
      <!--        ref="tree"-->
      <!--        :value="vtreeVal"-->
      <!--        :data="vtreeData"-->
      <!--        :render="renderTree"-->
      <!--        checkable-->
      <!--        selectable-->
      <!--        @checked-change="checkedChange"-->
      <!--        @selected-change="selectedChange"-->
      <!--      />-->
    </div>
    <div ref="charts" id="main" style="width: 100%; height: 600px"></div>
  </div>
</template>

<script setup lang="tsx" name="manageData">
  import { onMounted, ref, Ref } from 'vue'
  import type Node from 'element-plus/es/components/tree/src/model/node'

  onMounted(() => {
    getLeft()
    initCharts()
    
    const socket = new WebSocket('ws://localhost:8000')
    socket.addEventListener('open', () => {
      console.log('WebSocket连接已建立')
    })
    socket.addEventListener('message', (event) => {
      const message = event.data
      console.log('收到消息：', message)
    })
    socket.addEventListener('close', () => {
      console.log('WebSocket连接已断开')
    })
    socket.addEventListener('error', (error) => {
      console.error('发生错误：', error)
    })
  })

  // tree
  import VerticalTree from '@/components/VerticalTree.vue'

  let nodeKeyMax = 0
  let treeData: Ref<any[]> = ref([])
  async function getLeft() {
    const data = [
      {
        label: 'da1',
        groupName: 'da1',
        deviceGroupId: '1',
        nodeKey: 0
      },
      {
        label: 'da2',
        groupName: 'da2',
        deviceGroupId: '2',
        nodeKey: 0
      }
    ]
    data.forEach((i, idx) => {
      i.nodeKey = idx + 1
    })
    nodeKeyMax = data[data.length - 1].nodeKey
    treeData.value = data
  }
  const props: any = {
    label: 'groupName',
    isLeaf: 'leaf',
    class: customNodeClass
  }
  function customNodeClass(data: any, node: Node) {
    if (node.data.groupName === 'da1') {
      return 'none-box'
    }
    return null
  }
  function aaa(e) {
    console.log(e)
  }

  // vtree
  import Vtree, { VTreeNode, VTreeSearch, TreeNode } from '@wsfe/vue-tree'
  import '@wsfe/vue-tree/style.css'
  import { h } from 'vue'

  onMounted(() => {
    getLeft()
    initCharts()
    console.log(vtree)
    vtree.value.setCheckedKeys(['2'], true)
    vtree.value.setSelected(['2'], true)
  })
  
  const vtree = ref()
  let vtreeVal = ref(2)
  let vtreeData = ref([
    {
      id: '1',
      title: '1',
      checked: false,
      children: [
        {
          id: '1-1',
          title: '1-1',
          checked: false
        },
        {
          id: '1-2',
          title: '1-2',
          checked: false
        }
      ]
    },
    {
      id: '2',
      title: '2',
      checked: false,
      children: [
        {
          id: '2-1',
          title: '2-1',
          checked: false
        }
      ]
    }
  ])
  function checkedChange(e) {
    console.log(e)
  }
  function selectedChange(e) {
    console.log(e)
  }
  function renderTree(node: TreeNode) {
    return <div>
      <Iphone style="width: 20px; height: 20px; vertical-align: -4px" />
      {node.title}
    </div>
  }
  const handleAdd = (node: TreeNode) => {
    tree.value.insertAfter({}, node.id)
  }

  // echars
  import * as echarts from 'echarts'
  import zg from '../assets/zg.json'
  import cq from '../assets/cq.json'

  function initCharts() {
    const charts = echarts.init(document.getElementById('main'))
    const option = {
      // 背景颜色
      backgroundColor: '#404a59',
      // 提示浮窗样式
      tooltip: {
        show: true,
        trigger: 'item',
        alwaysShowContent: false,
        backgroundColor: '#0C121C',
        borderColor: 'rgba(0, 0, 0, 0.36);',
        triggerOn: 'mousemove',
        enterable: true,
        textStyle: {
          color: '#DADADA',
          fontSize: '12',
          width: 20,
          height: 30,
          overflow: 'break'
        },
        formatter(params: any) {
          console.log('tooltip', params)
          return `地区：${params.name}</br>数值：${params.value}`
        }
      },
      // 地图配置
      geo: {
        map: 'zg',
        label: {
          // 通常状态下的样式
          normal: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          },
          // 鼠标放上去的样式
          emphasis: {
            textStyle: {
              color: '#fff'
            }
          }
        },
        // 地图区域的样式设置
        itemStyle: {
          normal: {
            borderColor: 'rgba(147, 235, 248, 1)',
            borderWidth: 1,
            areaColor: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.8,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                }
              ],
              globalCoord: false // 缺省为 false
            },
            shadowColor: 'rgba(128, 217, 248, 1)',
            shadowOffsetX: -2,
            shadowOffsetY: 2,
            shadowBlur: 10
          },
          // 鼠标放上去高亮的样式
          emphasis: {
            areaColor: '#389BB7',
            borderWidth: 0
          }
        },
        tooltip: {
          show: true,
          trigger: 'item',
          alwaysShowContent: false,
          backgroundColor: '#0C121C',
          borderColor: 'rgba(0, 0, 0, 0.36);',
          triggerOn: 'mousemove',
          enterable: true,
          textStyle: {
            color: '#DADADA',
            fontSize: '12',
            width: 20,
            height: 30,
            overflow: 'break'
          },
          formatter(params: any) {
            console.log('geo', params)
            return `地区：${params.name}</br>数值：${params.geoIndex}`
          }
        },
      },
      series: [
        {
          type: 'scatter',
          coordinateSystem: 'geo',
          symbol: 'pin',
          legendHoverLink: true,
          symbolSize: [60, 60],
          // 这里渲染标志里的内容以及样式
          label: {
            show: true,
            formatter(value) {
              return value.data.value[2]
            },
            color: '#fff'
          },
          // 标志的样式
          itemStyle: {
            normal: {
              color: 'rgba(255,0,0,.7)',
              shadowBlur: 2,
              shadowColor: 'D8BC37'
            }
          },
          // 数据格式，其中name,value是必要的，value的前两个值是数据点的经纬度，其他的数据格式可以自定义
          // 至于如何展示，完全是靠上面的formatter来自己定义的
          data: [
            { name: '西藏', value: [91.23, 29.5, 2333] },
            { name: '黑龙江', value: [128.03, 47.01, 1007] }
          ],
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke'
          },
          hoverAnimation: true,
          zlevel: 1
        },
        {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          effectType: 'ripple',
          showEffectOn: 'render',
          rippleEffect: {
            period: 10,
            scale: 10,
            brushType: 'fill'
          },
          hoverAnimation: true,
          itemStyle: {
            normal: {
              color: 'rgba(255, 235, 59, .7)',
              shadowBlur: 10,
              shadowColor: '#333'
            }
          },
          zlevel: 1,
          data: [
            { name: '西藏', value: [91.23, 29.5, 1333] },
            { name: '黑龙江', value: [128.03, 47.01, 1007] }
          ]
        }
      ],
      graphic: [
        {
          type: 'text',
          left: '10%',
          top: '10%',
          style: {
            text: '中国',
            font: 'bolder 1.5rem "Microsoft YaHei", sans-serif',
            fill: '#fff'
          }
        }
      ],
      visualMap: {
        // 是否展示左下角，即是是false，也仅是不显示，不影响数据的映射
        show: true,
        // 上下端文字
        text: ['高', '低'],
        // 最小值和最大值，必须指定
        min: 0,
        max: 6000,
        // 位置
        left: '10%',
        bottom: '10%',
        // 是否展示滑块
        calculable: true,
        // 指定映射的数据，对应的是option.series，这里根据自己的实际需要进行配置
        seriesIndex: [0],
        // 从下到上的颜色
        inRange: {
          color: ['#00467F', '#A5CC82']
        },
        //字体颜色
        textStyle: {
          color: '#fff',
          map: 'china'
        }
      }
    }
    // 地图注册，第一个参数的名字必须和option.geo.map一致
    echarts.registerMap('zg', zg)
    charts.setOption(option)
    charts.on('click', (param) => {
      console.log(param)
      if (param.name === '重庆市') {
        // 修改option的配置，可以继续自定义
        option.geo.zoom = 1.3
        // 就像上面提到的，这里必须要和注册地图时的名字一致
        option.geo.map = 'cq'
        const idx = option.graphic.length + 1
        option.graphic.push({
          type: 'text',
          left: `${idx * 10}%`,
          top: '10%',
          style: {
            text: param.name,
            font: 'bolder 1.5rem "Microsoft YaHei", sans-serif',
            fill: '#fff'
          }
        })
        // 注册地图
        echarts.registerMap('cq', cq)
        // 重新渲染
        charts.setOption(option, true)
      }
      if (param.componentType === 'graphic') {
        // 修改option的配置，可以继续自定义
        option.geo.zoom = 1
        // 就像上面提到的，这里必须要和注册地图时的名字一致
        option.geo.map = 'zg'
        // 注册地图
        echarts.registerMap('zg', zg)
        // 重新渲染
        charts.setOption(option, true)
      }
    })
  }
</script>

<style scoped lang="scss">

</style>